<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 屏蔽tomcat 自带的 EL表达式 -->
<%@ page isELIgnored="false" %>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/bootstrap/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="${ctx}/static/css/bootstrapStyle.css" media="all">
	
	<script type="text/javascript" src="${ctx}/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/form.js"></script>
	<script type="text/javascript" src="${ctx}/static/layer/layer.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/ajax.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/bootstrap.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/jquery.ztree.core.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/jquery.ztree.excheck.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/jquery.ztree.exedit.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/jquery.ztree.exhide.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/customtree.js"></script>
	<script type="text/javascript" src="${ctx}/static/nice-validator/jquery.validator.js?local=zh-CN"></script>
	<script>
		var ctx = "${ctx}";
		$(document).ready(function() {
			$("#unitTree").tree({
					"name" : "unitName",
					"id" : "unitCode",
					"pId" : "parentCode",
					"check" : false,
					"edit":true,
					
					"url" : "${ctx}/unit/unitInfo/queryUnit",
					"onAsyncSuccess":function(event, treeId){
						var zTree = $.fn.zTree.getZTreeObj(treeId);
						var nodeList = zTree.getNodes();
						var data= $("#unitTree").tree("firstLeafNode",nodeList[0]);
						zTree.selectNode(data,true);//指定选中ID的节点  
						zTree.expandNode(data.getParentNode(), true, false);
						//默认显示第一个叶子节点
						 $('#unitForm').initForm(data); 
					},
					"onClick":function(event, treeId, treeNode){
						 $('#unitForm').initForm(treeNode); 
					},
					"addHoverDom": addHoverDom,
			        removeHoverDom: function(treeId, treeNode) {
			            $("#addBtn_"+treeNode.tId).unbind().remove();
			            $("#removeBtn_"+treeNode.tId).unbind().remove();
			        }
				});
			
			
			$('#unitForm').on('valid.form', function(e, form){
			    $.mask.post(ctx + '/unit/unitInfo/save', $("#unitForm").serializeArray(), function(data) {
					if (data.success) {
						$.mask.alert(data.msg,function(){
							parent.layer.closeAll();//关闭编辑页面
							var zTree = $.fn.zTree.getZTreeObj("unitTree");
							 nodes = zTree.getSelectedNodes(); 
							 var parentNode = zTree.getNodeByTId(nodes[0].parentTId);  
							 zTree.removeNode(nodes[0])
							 zTree.addNodes(parentNode, data.data);
							 zTree.selectNode(data.data,true);  
						});
					} else {
						$.mask.alert(data.msg);
					}
				});
		  }); 
		});
		function  addHoverDom(treeId, treeNode){
		 	var sObj = $("#" + treeNode.tId + "_span");
            if ($("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId+"' title='添加子节点' onfocus='this.blur();'></span>"
            + "<span class='button remove' id='removeBtn_" + treeNode.tId+"' title='删除节点' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj(treeId);
                var random = getRandom();
                var node = {unitCode:random,parentCode:treeNode.parentCode, unitName:"new node",add:"1"};
                zTree.addNodes(treeNode, node);
                var selectNode = zTree.getNodeByParam("unitCode",random,null);
                zTree.selectNode(selectNode,true);  
                $('#unitForm').initForm(selectNode); 
                return false;
            });
            var removeBtn = $("#removeBtn_"+treeNode.tId);
            if (removeBtn) removeBtn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj(treeId);
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });
		}
		
		/*
		生成6位随机数
		**/
		function getRandom(){
			var Num = "";
			for(var i=0;i<6;i++){
				Num += Math.floor(Math.random()*10);
			}
			return Num;
		}
	</script>
	
</head>
<body style="padding-top: 8px;">
	<div class="container">
	<div class="row clearfix">
		<div class="col-md-3 column">
			
			<ul id="unitTree" class="ztree"></ul>
		</div>
		<div class="col-md-9 column">
				<form id="unitForm" role="form" class="form-horizontal " data-validator-option="{theme:'yellow_right', timely:3, stopOnError:false,focusCleanup:true,invalidClass: 'has-error'}">
					<div class="form-group">
						<label for="parentCode" class="col-md-2 control-label">父节点编号</label>
						<div class="col-md-6">
							<input type="text" class="form-control" id="parentCode" name="parentCode" data-rule="required">
						</div>
					</div>
					<div class="form-group">
						<label for="unitCode" class="col-md-2 control-label">节点编号</label>
						<div class="col-md-6">
							<input type="text" class="form-control" id="unitCode" name="unitCode" data-rule="required">
						</div>
					</div>
					<div class="form-group">
						<label for="unitName" class="col-md-2 control-label">节点名称</label>
						<div class="col-md-6">
							<input type="text" class="form-control" id="unitName" name="unitName" data-rule="required">
						</div>
					</div>
					<input type="hidden" name="version">
					<input type="hidden" name="add">
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>
	</div>
</div>

 <div id="rMenu" class="list-group" style="position:absolute; display:none;">  
    <a href="#" class="list-group-item active list-group-item-cus">添加</a>
    <a href="#" class="list-group-item list-group-item-cus"> 删除</a>
</div>

	 
</body>
</html>
